<template>
    <div class="allbox">
        <WaveItem v-for="(item ) in crawlList" :key="item.cid" :dataObj="item"></WaveItem>
        <div class="LoadingBox">
            <Loading noMoreText='没有更多内容了~去其他页面看看吧' :loadShow="loadShow" :noMoreShow="noMoreShow" :loading="loading"></Loading>
        </div>
    </div>
</template>

<script>
import WaveItem from '../../../components/wave/waveItem.vue'
import http from '../../../util/http'
import Loading from '@/components/utilView/loadingView.vue'
import scroll from '../../../util/scroll'
import { mapState } from 'vuex'
export default {
  components: {
    WaveItem,
    Loading
  },
  data () {
    return {
      crawlList: [],
      noMore: false, // 判断数据是否还有
      offset: 0, // 偏移量 每次十条
      isRequest: false, // 网路请求控制
      loadShow: false, // 显示loading页面
      noMoreShow: false, // 没有更多数据提示
      loading: false // 加载中提示
    }
  },
  computed: {
    ...mapState(['user'])
  },

  mounted () {
    window.addEventListener('scroll', this.windowScroll, true) // 监听页面滚动
    // console.log(this.user) // 打印当前用户
    http.getdata('种草', this.user.uid ? this.user.uid : '0', this.offset).then((res) => {
      console.log(res.data.data)
      this.crawlList = res.data.data
      this.offset += 10
      // 判断是否还有足够数据
      if (res.data.data.length < 10) {
        // 没有更多数据
        this.noMore = true
        // 显示没有更多数据
        this.loadShow = true
        this.noMoreShow = true
      }
    })
  },

  methods: {
    // 实现无限加载更多数据
    // 回调函数
    windowScroll () {
      // 获取三个值
      const scrollTop = scroll.getScrollTop()
      const clientHeight = scroll.getClientHeight()
      const scrollHeight = scroll.getScrollHeight()
      // 距离底部10px时触发
      if (scrollTop + clientHeight + 10 > scrollHeight) {
        // 发送异步请求请求数据，同时携带offset并自增offset
        // noMore是自定义变量，如果是最后一批数据则以后都不加载
        if (!this.isRequest) {
          if (!this.noMore) {
            // isRequest限制请求的次数 上一次请求返回之前不会进行下一次请求 ，阻止发送多次请求
            this.isRequest = true
            // 显示加载中
            this.loadShow = true
            this.loading = true
            http.getdata('种草', this.user.uid, this.offset).then((res) => {
              this.crawlList = [...this.crawlList, ...res.data.data]
              // console.log(res.data.data)
              // 隐藏加载更多提示
              this.loadShow = false
              this.loading = false
              this.isRequest = false
              // 判断是否还有足够数据
              if (res.data.data.length < 10) {
                // 没有更多数据
                console.log('没有更多数据l')
                this.noMore = true
                // 显示没有更多数据
                this.loadShow = true
                this.noMoreShow = true
              }
              // 每次增加十条数据
              this.offset += 10
            })
          }
        }
      }
    }
  },

  unmounted () {
    window.removeEventListener('scroll', this.windowScroll, true)// 销毁滚动事件
  }

}
</script>

<style>

</style>
